<template>
	<view :data-theme="theme()" :class="theme() || ''" class="coupon_bg" v-if="!loading">
		<view class="coupon_bg"></view>
		<view class="coupon-detail-top">
			<view class="top_box">
				<view>
					<text class="icon iconfont icon-dianpu1" style="color: #fff; font-size: 32rpx"></text>
					<text class="white fb f32 ml10">{{
						detail.supplier ? detail.supplier.name : $t('coupon.platform_wide')
					}}</text>
				</view>
				<view class="item-wrap">
					<view :class="'coupon-item coupon-item-' + detail.colorText">
						<view class="operation d-b-c w-b">
							<view class="flex-1 coupon-content">
								<view class="mb20 text-ellipsis">
									<text class="f40 fb">{{ detail.name }}</text>
								</view>
								<view class="f22 gray9 mb20">
									<template v-if="detail.expireType == 10">
										{{ $t('coupon.validity_period') }}{{ detail.expireDay}}{{ $t('coupon.valid_days') }}
									</template>
									<template v-if="detail.expireType == 20">
										{{ $t('coupon.validity_to') }}{{ detail.startTimeText}}{{ $t('coupon.valid_until', { place1: detail.endTimeText }) }}
									</template>
								</view>
								<view v-if="detail.bigPrice != 0" class="f22">({{ $t('coupon.max_discount',
									{ place1: detail.bigPrice}) }})</view>
							</view>
							<view class="right-box d-c-c d-c">
								<view class="theme-price mb10" v-if="detail.couponType == 10">
									<text class="f24">HK$</text>
									<text class="f52 fb">{{ detail.reducePrice * 1 }}</text>
								</view>
								<view class="mb10 theme-price" v-if="detail.couponType == 20">
									<text class="f52 fb">{{ detail.discount / 10 }}</text>
									<text class="f24">{{ $t('coupon.discount') }}</text>
								</view>
								<view class="f24 mb10">{{
									detail.minPrice > 0
										? $t('coupon.min_purchase') + detail.minPrice * 1 + $t('coupon.usable_amount')
										: $t('coupon.no_threshold')
								}}</view>
								<view v-if="detail.state.value == 1" class="f26 coupon-btn theme-btn"
									@click="receiveCoupon()">
									{{ $t('coupon.claim') }}</view>
								<button type="default" v-else class="f26 coupon-btn btn-gray white"
									@click="receiveCoupon()">
									{{ detail.state.text }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-if="applyRange != 10">
				<view class="white f30 fb d-c-c">
					<text class="ml10 mr10 title-text">{{ $t('coupon.specified_items') }}</text>
				</view>
				<!-- 商品列表 -->
				<view class="o-h pro_list d-b-c f-w">
					<view class="pro_item" v-for="(item, index) in listData" :key="index" @click="
						gotoPage(
							'/pages/product/detail/detail?productId=' + item.productId
						)
						">
						<image class="pro_item_image" :src="item.productImage || '/static/default.png'"
							mode="aspectFill"></image>
						<view class="product-info">
							<view class="f28 gray3 text-ellipsis">{{
								item.productName
							}}</view>
							<view class="f22 gray9 mt10 mb10">{{ $t('coupon.total_transactions') }}{{ item.productSales
							}}{{ $t('coupon.transactions_count') }}</view>
							<view class="f24">
								<text class="f24 theme-price">HK$</text><text class="f32 fb theme-price">{{
									item.productPrice }}</text>
								<text class="gray9 text-d-line" v-if="item.linePrice > 0">HK${{ item.linePrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30 ww100" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">{{ $t('coupon.no_records') }}</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			loading: true,
			statusBarHeight: 0,
			titleBarHeight: 0,
			titleHeight: 0,
			opacity: 0,
			couponId: 0,
			listData: [],
			detail: {
				state: {
					value: 0,
					text: "",
				},
			},
			applyRange: 10,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			no_more: false,
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
	},
	onPageScroll(e) {
		if (e.scrollTop < 100) {
			this.opacity = e.scrollTop / 100;
		} else {
			this.opacity = 1;
		}
	},

	onLoad(e) {
		this.couponId = e.couponId;
		this.applyRange = e.applyRange;
	},
	onShow() {
		this.page = 1;
		this.listData = [];
		/*获取数据*/
		this.getData();
		uni.setNavigationBarTitle({
			title: this.$t('order.coupon_details')
		})
	},

	methods: {
		getData() {
			let self = this;
			self.loading = true;
			uni.showLoading({
				title: this.$t('coupon.loading'),
			});
			let params = {
				couponId: self.couponId,
			};
			if (self.applyRange != 20) {
				params.pageIndex = self.page || 1;
				params.PageSize = self.list_rows;
			}
			self._get("coupon/coupon/detail", params, function (res) {
				uni.hideLoading();
				self.loading = false;
				self.detail = res.data;
				if (self.detail.applyRange == 20) {
					self.listData = res.data.productList;
				} else if (self.detail.applyRange == 30) {
					self.listData = self.listData.concat(res.data.productList);
					// self.last_page = res.data.productList;
					// if (res.data.productList.last_page <= 1) {
					// 	self.no_more = true;
					// }
				}
			});
		},
		receiveCoupon() {
			let self = this;
			if (self.detail.state.value == 0) {
				return false;
			}
			self._post(
				"user/coupon/receive", {
				couponId: self.detail.couponId,
			},
				function (result) {
					uni.showToast({
						title: self.$t('coupon.claim_success'),
						icon: "success",
						mask: true,
						duration: 2000,
					});
					self.detail.state.value = 0;
					self.detail.state.text = self.$t('coupon.claimed');
				}
			);
		},
		goback() {
			uni.navigateBack();
		},
	},
};
</script>

<style lang="scss" scoped>
page {}

.coupon_bg {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 750rpx;
	height: 1134rpx;
	background: linear-gradient(-180deg, #394263 0%, rgba(255, 255, 255, 0) 100%);
}

.top_box {
	padding: 32rpx 20rpx 30rpx 20rpx;
}

.coupon-wrap {
	padding: 30rpx;
}

.coupon-detail-top {
	position: relative;
	z-index: 1;
}

.item-wrap {
	margin: 0;
	margin-top: 30rpx;
}

.coupon-item .btns button {
	border: none;
}

.coupon-item .circles text {
	display: block;
	width: 10rpx;
	height: 20rpx;
	background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
	border-radius: 0 10rpx 10rpx 0;
}

.coupon-item .info::before,
.coupon-item .info::after {
	background: linear-gradient(0deg, #fffdd7 0%, #fee6df 100%);
}

.decorate {
	width: 16rpx;
	height: 16rpx;
}

.pro_list {
	padding: 0 20rpx;
	padding-bottom: 80rpx;
	padding-top: 40rpx;
}

.pro_item {
	width: 342rpx;
	border-radius: 15rpx;
	overflow: hidden;
	background-color: #ffffff;
	margin-bottom: 12rpx;
}

.pro_item_image {
	width: 304rpx;
	height: 304rpx;
	display: block;
	margin: 0 auto;
	margin-top: 20rpx;
	margin-bottom: 12rpx;
	border-radius: 15rpx;
}

.head_top {
	position: relative;
	line-height: 30px;
	color: #ffffff;
	font-size: 32rpx;
}

.reg180 {
	padding-right: 20rpx;
	text-align: right;
	transform: rotateY(180deg);
	position: absolute;
	bottom: 0;
	height: 100%;
	display: flex;
	align-items: center;
	left: 0;
}

.icon-jiantou {
	color: #333333;
	font-size: 32rpx;
}

.product-info {
	padding: 0 20rpx 30rpx 20rpx;
}

.title-text {
	position: relative;
}

.title-text::after,
.title-text::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 40rpx;
	height: 2rpx;
	background: #ffffff;
	z-index: 1;
}

.title-text::after {
	left: -60rpx;
}

.title-text::before {
	right: -60rpx;
}
</style>